<template>
  <div class="container">
    <input style="width: 100%" :value="text" @input="handleUpdate" />
    <p class="result">{{ text }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const text = ref("");
let timer;

const debounce = (func, delay = 1000) => {
  let timer;
  return (...args) => {
    // return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.call(this, ...args);
    }, delay);
  };
};

const update = (e) => (text.value = e.target.value);

const handleUpdate = debounce(update, 1000);
</script>

<style lang="scss" scoped></style>
